<template>
  <div class="mounth">
    <div class="mounth" ref="myChart"></div>
  </div>
</template>

<script>
import _ from "underscore";
export default {
  name: "mounth",
  mounted() {
    this.creatdata();
  },
  methods: {
    drawLine(xdata, numdata) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart);

      // 绘制图表
      myChart.setOption({
        //    color: ['#3398DB'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: xdata,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "新增学员",
            type: "bar",
            barWidth: "60%",
            data: numdata
          }
        ]
      });
    },
    creatdata(data = [], type, key, day) {
      let xdata = [];
      let numdata = [];
      if (type == "周") {
        const obj = _.countBy(data, function(num) {
          let date = new Date(num[key]).getDay();
          return date;
        });
        xdata = Object.keys(obj);
        numdata = Object.values(obj);
        let arr = [0, 0, 0, 0, 0, 0, 0];
        for (let i = 0; i < xdata.length; i++) {
          arr[xdata[i] - 1] = numdata[i];
        }
        console.log(arr);
        numdata = arr;
        xdata = [
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
          "星期日"
        ];
      }
      if (type == "月") {
        const obj = _.countBy(data, function(num) {
          var date = new Date(num[key]).getDate();
          return date;
        });
        xdata = Object.keys(obj);
        numdata = Object.values(obj);
        console.log(day);
        let arr = [];
        for (let i = 0; i < day; i++) {
          arr[i] = 0;
        }
        for (let i = 0; i < xdata.length; i++) {
          arr[xdata[i] - 1] = numdata[i];
        }
        console.log(arr);
        numdata = arr;
        xdata = [
          "1号",
          "2号",
          "3号",
          "4号",
          "5号",
          "6号",
          "7号",
          "8号",
          "9号",
          "10号",
          "11号",
          "12号",
          "13号",
          "14号",
          "15号",
          "16号",
          "17号",
          "18号",
          "19号",
          "20号",
          "21号",
          "22号",
          "23号",
          "24号",
          "25号",
          "26号",
          "27号",
          "28号",
          "29号",
          "30号",
          "31号"
        ].splice(0, day);
      }
      if (type == "年") {
        const obj = _.countBy(data, function(num) {
          var date = new Date(num[key]).getMonth();
          return date;
        });
        xdata = Object.keys(obj);
        numdata = Object.values(obj);
        let arr = [];
        for (let i = 0; i < 12; i++) {
          arr[i] = 0;
        }
        for (let i = 0; i < xdata.length; i++) {
          arr[xdata[i] - 1] = numdata[i];
        }
        // arr.splice(0,1)
        console.log(arr);
        numdata = arr;
        xdata = [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月"
        ];
      }
      this.drawLine(xdata, numdata);
    }
  }
};
</script>

<style scoped>
.mounth {
  max-width: 1150px;
  height: 450px;
}
</style>